<!DOCTYPE html >
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style>
        ::-webkit-scrollbar {
            display: none;
        }

        html,
        body {
            height: 100%;

        }

        .el-container,
        .el-main {
            overflow-y: scroll;
            scrollbar-color: transparent transparent;
            scrollbar-track-color: transparent;
            height: 100%;
        }

        .el-header {
            background: #fff url("/header.png");
            color: #fff;
            text-align: center;
            font-size: 25px;
            line-height: 60px;
            border-radius: 5px;
        }

        #el_input {
            width: 300px;
            padding: 7px;
        }

        #el_button {
            padding: 7px;
        }

        .el-submenu {
            width: 100px;
        }

        .el-footer {
            background: #fff url("/header.png");
            color: #fff;
            text-align: center;
            font-size: 15px;
            line-height: 25px;
            border-radius: 5px;
        }

        .float-div {
            float: left;
        }

        .el-menu-item {
            width: 100px;
        }

        #elbutton {
            padding: 8px;
        }

        #cart {
            background: #fff;
        }
        /*#_title{*/
        /*    font-family: "Hiragino Sans GB";*/
        /*    font-size: 32px;*/
        /*    color: white;*/
        /*    margin-left: 210px;*/
        /*}*/

    </style>
    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/theme-chalk/index.min.css"/>
    <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/index.min.js"></script>
</head>
<body>
<el-container id="app">
    <!-- 标题栏 -->

    <el-header height="70px">
        <el-row>
            <el-col  :span="16" :offset="2" id="_title">
                <a th:href="@{/}" style="color: white">青鸟餐饮</a>
            </el-col>
            <el-col :span="2">
                <el-button size="mini" icon="el-icon-s-goods" id="cart" @click="goMycart">购物车
                </el-button>
            </el-col>
            <el-col :span="2">
                <el-button size="mini" icon="el-icon-goods" id="cart" @click="goOrder">我的订单
                </el-button>
            </el-col>
            <el-col :span="2">
                <el-dropdown  @command="logout">
							<span style="font-size:25px;color:#fff;cursor:pointer;">
								<i class="el-icon-user-solid"></i>
							</span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item  command="a" style="font-size:18px;">注销</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-col>
        </el-row>
    </el-header>

    <!-- 顶部导航 -->
    <el-main>

        <el-menu mode="horizontal" unique-opened="true" style="margin-top:-20px;">
            <div id="el_submenu">

                <div class="float-div">
                    <div id="elbutton">
                        <el-button type="text" @click="drawer = true" style="margin-left: 16px;">
                            <span style="font-size:18px;">餐厅类型</span>
                        </el-button>
                    </div>
                </div>

                <el-drawer
                        title="请选择想要的类型~~~"
                        :visible.sync="drawer"
                        :direction="direction"
                        :size="size"
                        :with-header="false">
                    <div v-for="type in typeList">
                        <el-button type="success" round="" v-text="type.type_name"
                                   @click="selectShopType(type.type_name)"></el-button>
                        <br>
                    </div>
                </el-drawer>

                <div id="el_input" class="float-div">
                    <el-input v-model="keyword" placeholder="请输入内容"></el-input>
                </div>
                <div id="el_button" class="float-div">
                    <el-row>
                        <el-button icon="el-icon-search" circle @click="toSearch(keyword)">搜索</el-button>
                    </el-row>
                </div>
            </div>
        </el-menu>
        <!-- 工作区 -->

        <div v-html="work" style="height:95%;margin-top:-30px;margin-right:-40px;"></div>

    </el-main>

</el-container>
<script>

    var app = new Vue({
        el: "#app",
        data: {
            size: '110px',
            direction: 'rtl',
            drawer: false,
            input: "",
            work: "<iframe frameborder=0 width=100% height=100% src='allShop.html'></iframe>",
            shopList: [],
            typeList: [],
            currentPage: 1,
            pageSize: 4,
            keyword: '',
            ids: []
        },
        methods: {
            //openWork
            openWork: function (work) {
                this.work = "<iframe frameborder=0 width=100% height=100% src='" + work + "'></iframe>";
            },
            initTypes() {
                let _this = this;
                $.get("/type/all", function (data) {
                    _this.typeList = data
                })
            },
            //范启文：跳转到我的购物车页面
            goMycart: function () {
                /*this.work = "<iframe frameborder=0 width=100% height=100% src='order.html'></iframe>";*/
               // window.parent.app.work = "<iframe frameborder=0 width=100% height=100% src='mycart.html'></iframe>";
                window.parent.app.openWork("mycart.html");
            },
            goOrder(){
                window.parent.app.openWork("order.html");
               // window.parent.app.work = "<iframe frameborder=0 width=100% height=100% src='order.html'></iframe>";
            },
            selectShopType(typeName) {
                app.openWork("/type/toSelectShopByType?typeName="+typeName);
            },
            toSearch(keyword) {
                app.openWork("/shop/toSearchShopByES?keyword="+keyword);
            },
            logout(command){

                $.get("/user/logout",function (data) {
                    if(data=="ok"){

                        location.href="login.html"

                    }else{
                        alert(data)
                    }

                })
            }


        },
        created() {
            this.initTypes();
        }

    });
</script>

<div th:insert="publicFoot"/>
<script th:src="@{publicFoot.js}"></script>
</body>
</html>
